<template>
    <view class="topWrap bg-theme">
        <view class="mapWrap top-6">
            <map class="metroMap" :longitude="longitude" :latitude="latitude" :polyline="polyline" :markers="stations" scale="11" @tap="handleMap"></map>
            <cover-view class="toMapBtn flex bg-fff font12 fontBold" @click="handleMap">
                <cover-view class="flex" v-if="name.length > 1">
                    <cover-view class="lineWrap flex col-fff right-3" :style="{backgroundColor: color}">
                        <cover-view class="num">{{ name[0] }}</cover-view>
                    </cover-view>
                    <cover-view>号线</cover-view>
                    <cover-view>{{ name[1] }}</cover-view>
                </cover-view>
                <cover-view v-else>
                    <cover-view>{{ name[0] }}</cover-view>
                </cover-view>
                <cover-view class="line left-5 right-5 bg-black"></cover-view>
                <cover-view>点击看大图</cover-view>
            </cover-view>
        </view>
    </view>
</template>

<script>
	import { mapState } from 'pinia';
	import { useConfigStore } from '@/store/index';
	export default {
		data() {
			return {
			}
		},
		props:{
            current: {
                type: Number,
                default: 0
            },
            name: {
                type: Array,
                default: function() {
                    return []
                }
            },
            color: {
                type: String,
                default: ''
            },
            polyline: {
                type: Array,
                default: function() {
                    return []
                }
            },

            stations: {
                type: Array,
                default: function() {
                    return []
                }
            }
		},

        computed: {
			...mapState(useConfigStore, ['puid']),

            longitude: function() {
                if(this.stations.length === 0) return null;
                const middleI = Math.floor(this.stations.length / 2);
                return this.stations[middleI].longitude;
            },

            latitude: function() {
                if(this.stations.length === 0) return null;
                const middleI = Math.floor(this.stations.length / 2);
                return this.stations[middleI].latitude;
            }
        },

		methods:{
            //1.5KM地铁房
            toMetroHouses(){
                uni.navigateTo({
                	url: `/pages/houses/metro-find-houses/metro-find-houses?puid=${this.puid}`
                })
            },

            //点击地图
            handleMap() {
                uni.navigateTo({
                	url: `/pages/products/metro/map?puid=${this.puid}&lineCurrent=${this.current}`
                })
            }
        }
	}
</script>

<style scoped lang="scss">
.topWrap{
    padding: 20rpx 28rpx;
    .mapWrap{
        width: 100%;
        height: 240rpx;
        border-radius: 20rpx;
        overflow: hidden;
        position: relative;
        .metroMap{
            width: 100%;
            height: 280rpx;
        }
        .toMapBtn{
            position: absolute;
            top: 28rpx;
            left: 28rpx;
            border: 2rpx solid rgba(0,0,0,.3);
            border-radius: 30rpx;
            padding: 4rpx 10rpx 4rpx 4rpx;
            .lineWrap{
                aspect-ratio: 1;
                border-radius: 50%;
                .num{
                    /* #ifdef MP-TOUTIAO || MP-BAIDU */
                    width: 40rpx;
                    height: 40rpx;
                    line-height: 40rpx;
                    text-align: center;
                    /* #endif */
                    /* #ifdef MP-WEIXIN */
                    padding: 6rpx 8rpx 8rpx;
                    /* #endif */
                }
            }
            .line{
                width: 2rpx;
                height: 24rpx;
            }
        }
    }
}
</style>